<template>
  <div class="login">
    <div class="login-wrapper">
      <div class="login-box">
        <div class="left-wrapper">
          <div class="case-box">
            <transition-group name="image" tag="ul">
              <li v-for="(item,index) in caseImgArr" v-show="curIndex==index" :key="index">
                <img :src="item" alt="" width="100%">
              </li>
            </transition-group>
          </div>
        </div>
        <div class="right-wrapper">
          <img src="./logo.png" alt="logo" class="m-logo">
          <div class="form-box">
            <Form ref="formInline" :model="formInline" :rules="ruleInline" @submit.stop.prevent="handleSubmit('formInline')" @keyup.native.13="handleSubmit('formInline')">
              <FormItem prop="email">
                <Input type="text" v-model="formInline.email" placeholder="请输入登录时使用的邮箱">
                <Icon type="ios-person-outline" slot="prepend"></Icon>
                </Input>
              </FormItem>
              <FormItem prop="password">
                <Input type="password" v-model="formInline.password" placeholder="请输入密码">
                <Icon type="ios-locked-outline" slot="prepend"></Icon>
                </Input>
              </FormItem>
              <FormItem>
                <Button type="primary" long size="large" @click="handleSubmit('formInline')">登录
                </Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
      <div class="footer">Copyright ©
        <span copyright-year="">2017-2018</span>  顶效广告平台</div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import * as types from '../../store/mutation-types';

export default {
  name: 'login',
  data() {
    return {
      formInline: {
        email: '',
        password: ''
      },
      ruleInline: {
        email: [
          { required: true, message: '请填写邮箱', trigger: 'blur' },
          { type: 'email', message: '请填写正确的邮箱格式', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' },
          { type: 'string', min: 3, message: '密码长度不能小于6位', trigger: 'blur' }
        ]
      },
      curIndex: 0,
      caseImgArr: [
        '/static/imgs/case_1.jpg',
        '/static/imgs/case_2.jpg',
        '/static/imgs/case_3.jpg',
        '/static/imgs/case_4.jpg',
        '/static/imgs/case_5.jpg',
        '/static/imgs/case_6.jpg'
      ]
    };
  },
  mounted() {
    this.changeCase();
  },
  methods: {
    changeCase() {
      let vm = this;
      setInterval(function() {
        if (vm.curIndex < 5) {
          vm.curIndex++;
        } else {
          vm.curIndex = 1;
        }
      }, 3000);
    },
    handelKeyDown(e) {
      let vm = this;
      if (e.keyCode === 'enter') {
        vm.handleSubmit('formInline');
      }
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.postData(this.formInline);
        } else {
          this.$Message.error('请先输入正确的邮箱和密码!');
        }
      });
    },
    postData(formData) {
      let vm = this;
      let params = {
        type: 'post',
        url: 'token/getAppToken',
        params: {
          email: formData.email,
          password: formData.password
        },
        sCallback(data) {
          if (data.code === 201) {
            vm.$Message.success('登录成功!');
            vm.$store.commit(types.LOGIN, data.data.token);
            vm.$store.commit(types.USER, data.data.user);
            let redirect = decodeURIComponent(
              vm.$route.query.redirect || '/home/ad'
            );
            vm.$router.push({
              path: redirect
            });
          } else {
            vm.$Message.error('帐号或密码错误!');
          }
        },
        eCallback(e) {
          if (e.errorCode === 10004) {
            vm.$Message.error('网络错误!');
          }
        }
      };
      this.http.request(params);
    },
    show (ev) {
      if (ev.keyCode === 13) {
          alert('你按回车键了');
      }
    }
  }
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
.image-enter-active {
  transform: translateX(0);
  transition: all 1.5s ease;
}

.image-leave-active {
  transform: translateX(-100%);
  transition: all 1.5s ease;
}

.image-enter {
  transform: translateX(100%);
  opacity: 0;
}

.image-leave {
  transform: translateX(0);
}

.image-leave-to {
  opacity: 0;
}

.login {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  text-align: center;
  overflow: hidden;
  background-image: -webkit-image-set(url('./bg.png') 1x, url('./bg@2x.png') 2x);
  background-size: 100px;
  background-repeat: repeat;
  min-height: 800px;
  min-width: 630px;

  .bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .login-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;

    .login-box {
      display: flex;
      padding: 20px 40px;
      width: 1200px;
      // width 600px
      height: 700px;

      // background url('./gray-bg.png') #fff bottom repeat-x
      // border-radius 10px
      // border 1px solid #dadada
      // box-shadow 0 9px 30px -6px rgba(0, 0, 0, 0.2), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 10px 20px -10px rgba(0, 0, 0, 0.04)
      .left-wrapper {
        flex: 1.5;
        flex-direction: column;
        justify-content: center;

        .case-box {
          position: relative;
          margin: 0 auto;
          width: 400px;
          height: 650px;
          overflow: hidden;

          img {
            transition: opacity 0.5s;
          }

          ul {
            li {
              position: absolute;
              width: 400px;
              height: 650px;
            }
          }
        }
      }

      .right-wrapper {
        flex: 1;
        margin-top: 100px;
        padding-top: 70px;
        height: 400px;
        background: url('./gray-bg.png') #fff bottom repeat-x;
        border-radius: 10px;
        border: 1px solid #dadada;
        box-shadow: 0 9px 30px -6px rgba(0, 0, 0, 0.2), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 18px 20px -10px rgba(0, 0, 0, 0.04), 0 10px 20px -10px rgba(0, 0, 0, 0.04);

        .m-logo {
          display: block;
          margin: 0 auto 15px;
          width: 180px;
        }

        .form-box {
          margin: 0 auto;
          width: 300px;
        }
      }

      img {
        user-select: none;
      }
    }

    .footer {
      margin-top: 20px;
      height: 15px;
      line-height: 15px;
      color: #757575;
    }
  }
}
</style>
